<script setup>
import {onMounted, ref, defineProps, watch} from "vue";
import * as echarts from "echarts";
import { useViewWH } from "../mixins/index.js";

const componentRef = ref(null);
const pieRef = ref(null);
let pie = null

const { width, height } = useViewWH(componentRef)
const props = defineProps(['type'])

onMounted(() => {
  setTimeout(() => {
    pie = echarts.init(pieRef.value)
    pie.setOption({
      title: {
        text: 'Referer of a Website',
        left: 'center',
        textStyle: { color: '#fff', fontSize: '1rem' }
      },
      tooltip: {
        trigger: 'item',
        textStyle: { fontSize: '1rem' }
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '50%',
          data: [
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' }
          ],
          label: {
            fontSize: '1rem'
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    })
    window.addEventListener("resize", () => {
      pie.resize()
    })
  }, 1000)
})

watch(() => props.type, val => {
  pie.resize()
})

</script>

<template>
  <div class="left border-red" ref="componentRef">
    <div>width: {{width}}px</div>
    <div>height: {{height}}px</div>

    <div class="pie" ref="pieRef">

    </div>
  </div>
</template>

<style scoped>
.left {
  width: 30rem;
  height: 100%;
}
.pie {
  width: 30rem;
  height: 30rem;
}

</style>
